<template>
  <view class="coupon">
    <u-popup :show="newCouponFlag" @close="handleClose">
      <view class="title">
        优惠券 <image src="/static/image/close.png" @click="handleClose" />
      </view>
      <view class="content">
        <u-tabs
          :current="0"
          :list="couponTabs"
          line-width="40"
          line-color="#f56c6c"
          :active-style="{
            fontSize: '28rpx',
            color: '#FF5533',
            fontWeight: '700'
          }"
          :inactive-style="{
            fontSize: '28rpx',
            color: '#222222'
          }"
          :item-style="{
            height: '44px'
          }"
          @click="handleChangeCouponTabs"
        />
        <view class="contentCoupon">
          <view v-if="couponUseStatus == 0 && defaultCoupon" class="choice">
            已选择：{{ checkCoupon.applCategoryIntroduce || '' }}，共抵扣：
            ¥{{ checkCoupon.couponRealValue || '0' }}
          </view>
          <!-- <view v-for="(item, index) in newCouponsList" :key="index">
            <coupon :coupon-obj="item" :coupon-choosen="defaultCoupon" :choice="true" @updateCode="updateCode" />
          </view> -->
          <CouponList
            :coupon-list="newCouponsList"
            :coupon-choosen.sync="checkCoupon"
          />
        </view>
      </view>
      <view class="button" @click="handleOk">确定</view>
    </u-popup>
  </view>
</template>

<script>
// import coupon from '@/components/coupon'
import CouponList from './CouponList'

export default {
  components: {
    // coupon
    CouponList
  },
  props: {
    couponFlag: {
      type: Boolean,
      default: false
    },
    couponsList: {
      type: Array,
      default() {
        return []
      }
    },
    defaultCoupon: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      couponTabs: [
        { name: '可用优惠券' },
        { name: '不可用优惠券' }
      ],
      couponUseStatus: 0,
      checkCoupon: this.defaultCoupon
    }
  },
  computed: {
    newCouponFlag() {
      return this.couponFlag
    },
    newCouponsList() {
      return this.couponsList.filter((item) => item.couponUseStatus == this.couponUseStatus)
    }
  },
  methods: {
    handleChangeCouponTabs(e) {
      var status = e.index == 0 ? 0 : -1
      this.couponUseStatus = status
    },
    handleClose() {
      this.$emit('update:couponFlag', false)
    },
    handleOk() {
      this.$emit('update:default-coupon', this.checkCoupon)
      this.$emit('update:couponFlag', false)
      this.$emit('selectFn')
    }
  },
}
</script>

<style scoped lang="scss">
.coupon {
  .contentCoupon {
    height: 900rpx;
    overflow-y: auto;
    //margin-bottom: 180rpx;
  }
  .button {
    width: 624rpx;
    height: 64rpx;
    border-radius: 8rpx;
    background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
    margin: 0 auto;
    margin-top: 66rpx;
    margin-bottom: 60rpx;
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .title {
    width: 100%;
    height: 88rpx;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    color: #222222;
    font-size: 28rpx;
    font-weight: 700;
    border-bottom: 1rpx solid #F5F5F5;
    image {
      height: 48rpx;
      width: 48rpx;
    }
  }
  .content {
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    .choice {
      color: #999999;
      font-size: 28rpx;
      font-weight: 400;
      margin-top: 24rpx;
      text {
        color: #FF5533;
        font-size: 28rpx;
        font-weight: 400;
      }
    }
  }
}
</style>
